import 'package:flutter/material.dart';
import '../../components/search_box.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  int _selectedIndex = 0;
  final List<String> _categories = [
    '热门推荐', '手机数码', '电脑办公', '家用电器', 
    '美妆护肤', '服装鞋包', '运动户外', '图书音像',
    '食品生鲜', '家居家装', '母婴玩具', '医药健康'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        elevation: 0,
        title: const Text(
          '商品分类',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(48.0),
          child: SearchBox(
            readOnly: true,
            // 在SearchBox的onTap回调中
            onTap: () {
              Navigator.pushNamed(context, '/search');
            },
          ),
        ),
      ),
      body: Row(
        children: [
          // 左侧分类列表
          SizedBox(
            width: 100,
            child: ListView.builder(
              itemCount: _categories.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  child: Container(
                    height: 60,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: _selectedIndex == index 
                          ? Colors.white 
                          : Colors.grey[200],
                      border: Border(
                        left: BorderSide(
                          width: 5,
                          color: _selectedIndex == index 
                              ? Theme.of(context).primaryColor 
                              : Colors.transparent,
                        ),
                      ),
                    ),
                    child: Text(
                      _categories[index],
                      style: TextStyle(
                        color: _selectedIndex == index 
                            ? Theme.of(context).primaryColor 
                            : Colors.black,
                        fontWeight: _selectedIndex == index 
                            ? FontWeight.bold 
                            : FontWeight.normal,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          
          // 右侧商品列表
          Expanded(
            child: Container(
              color: Colors.white,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      _categories[_selectedIndex],
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Expanded(
                    child: GridView.builder(
                      padding: const EdgeInsets.all(8.0),
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 0.75,
                        crossAxisSpacing: 8,
                        mainAxisSpacing: 8,
                      ),
                      itemCount: 20,
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            Navigator.pushNamed(context, '/detail', 
                              arguments: {'id': index, 'category': _categories[_selectedIndex]});
                          },
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Expanded(
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.grey[200],
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: Center(
                                    child: Icon(
                                      Icons.image,
                                      size: 40,
                                      color: Colors.grey[400],
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                '${_categories[_selectedIndex]}商品${index + 1}',
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.center,
                                style: const TextStyle(fontSize: 12),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}